<template>
    <div class="MallSize">
      <div>
        <el-button type="primary">添加</el-button>
        <el-button type="danger">编辑</el-button>
      </div>
      <el-tabs v-model="editableTabsValue" type="card" editable @tab-click="handleTabsEdit" @edit="delTab">
        <el-tab-pane :key="item.name" v-for="item in editableTabs" :label="item.name" :name="item.name">
          <div style="background:pink" v-if="item.remark">
            {{ item.remark }}
          </div>
  
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" height="480px"
            @selection-change="handleSelectionChange">
  
            <el-table-column prop="id" label="属性名称">
  
            </el-table-column>
            <el-table-column prop="name" label="备注">
            </el-table-column>
  
  
  
            <el-table-column prop="address" label="操作" width="300" style="text-align:center">
              <template slot-scope="{row}">
  
                <el-button type="text" style="color:#409eff" @click="edit(row)"> {{ row.date }}编辑</el-button>
                <el-button type="text" style="color:red" @click="del(row)">删除</el-button>
              </template>
  
  
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
  
    </div>
  </template>
  
  <script>
  import { mallspecifications, mallchildsList } from "@/api/index"
  export default {
    name: 'MallSize',
    data() {
      return {
        editableTabsValue: '2',
        editableTabs: [{
          title: 'Tab 1',
          name: '1',
          content: 'Tab 1 content'
        }, {
          title: 'Tab 2',
          name: '2',
          content: 'Tab 2 content'
        }],
        tabIndex: 2,
        tableData: []
      }
    },
    methods: {
      delTab(targetName, action) {
        // if (action === 'add') {
        //   let newTabName = ++this.tabIndex + '';
        //   this.editableTabs.push({
        //     title: 'New Tab',
        //     name: newTabName,
        //     content: 'New Tab content'
        //   });
        //   this.editableTabsValue = newTabName;
        // }
        if (action === 'remove') {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                }
              }
            });
          }
  
          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
      },
      handleTabsEdit(targetName) {
        console.log(targetName.name)
        let id = this.editableTabs.filter(r => r.name == targetName.name)[0].id
        this.getchildsList({ propertyId: id })
      },
  
  
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val;
      },
  
      // tab栏有父子内容嵌套,需要请求两个接口,先获取父接口拿到数据,再创建子接口,
      // 把父接口获取的id以调用子接口函数的方式穿过去请求子内容
      async getTabList() {
        let { data: res } = await mallspecifications()
        this.editableTabs = res
        console.log(res)
        this.editableTabsValue = this.editableTabs[0].name
        this.getchildsList({ propertyId: this.editableTabs[0].id })
      },
      async getchildsList(id) {
        let { data: res } = await mallchildsList(id)
        this.tableData = res
        console.log(res)
      },
      // 删除
      del(row) {
        console.log(row)
      },
  
      // 编辑
      edit(row) {
        console.log(row)
      },
    },
    mounted() {
      this.getTabList()
  
    },
  
  }
  </script>
  <style lang="scss" scoped></style>